<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <base href="http://localhost:81/resources/back/">

    <link rel="stylesheet" type="text/css" href="http://localhost:81/resources/front/css/style.css"/>
    <link rel="stylesheet" type="text/css" href="http://localhost:81/resources/front/css/shopping-mall-index.css"/>
    <link href="css/H-ui.min.css" rel="stylesheet" type="text/css"/>
    <link href="css/H-ui.admin.css" rel="stylesheet" type="text/css"/>
    <link href="lib/icheck/icheck.css" rel="stylesheet" type="text/css"/>
    <link href="lib/Hui-iconfont/1.0.1/iconfont.css" rel="stylesheet" type="text/css"/>

    <link rel="stylesheet" type="text/css" href="css/verify.css"/>
    <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>

    <!--滑块验证码样式-->
    <style>
        .slidercaptcha {
            margin-left: 365px;
            width: 314px;
            height: 286px;
            border-radius: 4px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.125);
        }

        .slidercaptcha .card-body {
            padding: 1rem;
        }

        .slidercaptcha canvas:first-child {
            border-radius: 4px;
            border: 1px solid #e6e8eb;
        }

        .slidercaptcha.card .card-header {
            background-image: none;
            background-color: rgba(0, 0, 0, 0.03);
        }

        .refreshIcon {
            top: -54px;
        }
    </style>
    <link rel="stylesheet" href="https://www.jq22.com/jquery/bootstrap-4.2.1.css">
    <link rel="stylesheet" href="https://www.jq22.com/jquery/font-awesome.4.7.0.css">
    <link href="css/slidercaptcha.css" rel="stylesheet" />
</head>

<body>

<!--top 开始-->
<div class="top">
    <div class="top-con w1200">
        <p class="t-con-l f-l">您好，欢迎来到宅客微购注册中心</p>
        <ul class="t-con-r f-r">
            <li><a href="#">我 (个人中心)</a></li>
            <li><a href="#">我的购物车</a></li>
            <li><a href="#">我的订单</a></li>
            <li class="erweima">
                <a href="#">扫描二维码</a>
                <div class="ewm-tu">
                    <a href="#"><img src="images/erweima-tu.jpg"/></a>
                </div>
            </li>
            <div style="clear:both;"></div>
        </ul>
        <div style="clear:both;"></div>
    </div>
</div>


<div class="pd-20">
    <form action="http://www.jd.com" method="post" class="form form-horizontal" id="form-admin-add">
        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>用户名：</label>
            <div class="formControls col-2">
                <input type="text" class="input-text"
                       placeholder="输入用户名" id="username" name="username"
                       ajaxurl="http://localhost:81/auth/check"
                       datatype="*2-16" nullmsg="用户名不能为空">
            </div>
            <div class="col-4"></div>
        </div>
        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>密码：</label>
            <div class="formControls col-2">
                <input type="password" placeholder="密码" name="password" autocomplete="off"
                       class="input-text" datatype="*3-10" nullmsg="密码不能为空">
            </div>
            <div class="col-4"></div>
        </div>

        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>确认密码：</label>
            <div class="formControls col-2">
                <input type="password" placeholder="密码" recheck="password" autocomplete="off"
                       class="input-text" datatype="*" nullmsg="密码不能为空">
            </div>
            <div class="col-4"></div>
        </div>

        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>手机：</label>
            <div class="formControls col-2">
                <input type="text" class="input-text"  placeholder="" id="mobile" name="phone"
                       datatype="m" nullmsg="手机号不能为空">
                <input class="btn btn-primary radius" id="sendCodeBut" type="button"
                       value="&nbsp;&nbsp;获取验证码&nbsp;&nbsp;">
            </div>
            <div class="col-4"></div>
        </div>

        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>验证码：</label>
            <div class="formControls col-2">
                <input type="text" class="input-text" value="" placeholder="请输入6位验证码" id="user-tel" name="code" datatype="n"
                       nullmsg="验证码不能为空">
            </div>
            <div class="col-4"></div>
        </div>

        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>邮箱：</label>
            <div class="formControls col-2">
                <input type="text" class="input-text"
                       ajaxurl="http://localhost:81/auth/check"
                       placeholder="xxx.@qq.com"  name="email" id="email" datatype="e" nullmsg="请输入邮箱！">
            </div>
            <div class="col-4"></div>
        </div>

        <!--      滑块验证码-->
        <div class="row cl">
            <div class="container-fluid">
                <div class="form-row">
                    <div class="col-12">
                        <div class="slidercaptcha card">
                            <div class="card-header">
                                <span>请完成安全验证</span>
                            </div>
                            <div class="card-body">
                                <div id="captcha"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row cl">
            <div class="col-9 col-offset-3">
                <input class="btn btn-primary radius" id="user-register-but" style="display: none" type="submit"
                       value="&nbsp;&nbsp;注册&nbsp;&nbsp;">
            </div>
        </div>

    </form>
</div>

<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="lib/icheck/jquery.icheck.min.js"></script>
<script type="text/javascript" src="lib/Validform/5.3.2/Validform.min.js"></script>
<script type="text/javascript" src="lib/layer/1.9.3/layer.js"></script>
<script type="text/javascript" src="js/H-ui.js"></script>
<script type="text/javascript" src="js/H-ui.admin.js"></script>
<script src="https://www.51qianduan.com/uploadfile/article/1912/17/10774/js/verify.js" type="text/javascript"
        charset="utf-8"></script>
<script src="js/AjaxUtlis.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

    // 手机验证码倒计时
    var t = 60;
    function time(but) {
        but.val("验证码已发送(" + t + ")s");
        var timeInter = setInterval(function () {
            t--;
            if (t < 0) {
                // 把按钮取消禁用
                but.val("点击这里重新获取");
                but.prop("disabled",false);
                t = 60; // 把时间回复称60s
                clearInterval(timeInter); // 删除定时器
                return false;
            }
            but.val("验证码已发送(" + t + ")s");
        }, 1000)
    }

    // 发送手机验证码
    function callSendMobile(phone){
        $.ajax({
            url:"http://localhost:81/auth/sendPhoneCode/"+phone,
            method:"GET",
            success:function(resp){
            }
        });
    }

    $(function () {
        $("#sendCodeBut").click(function () {
            console.log("点击而来发送验证码的按钮")
            // 1.禁用按钮
            $(this).prop("disabled", true); // prop是attr升级版
            // 2、异步调用后台接口给用户手机发送验证码
            callSendMobile($("#mobile").val());
            // 3.开始倒计时
            time($(this));
        });

        $("#form-admin-add").Validform({
            tiptype: 2,
            // //注意：如果不是ajax方式提交表单，传入callback，这时data参数是当前表单对象，回调函数会在表单验证全部通过后执行，
            // 然后判断是否提交表单，如果callback里明确return false，则表单不会提交，如果return true或没有return，则会提交表单。
            callback: function (form) {
                // 1.序列化表单数据
                var array = form.serializeArray();
                // 2.准备一个对象
                var param = new Object();
                // 3.把数组中的name和value全部添加param对象中
                for(var i =0;i<array.length;i++){
                    var name = array[i].name; // username
                    var value = array[i].value; // admin
                    param[name] = value ; // param.username="admin"
                }
                console.log(param);
                // 3.数据发送给后台
                post("auth/register",param,function(resp){
                    layer.msg("操作成功", {icon: 1,time:1500},function(){
                        // 必须要等待提示层结束后才能跳转到登录页面
                        location.href = "http://localhost:81/auth/loginUser.html"
                    });
                });
                return false; // 返回false表单自动不会提交，我们要的是异步提交
            }
        });
    });
</script>
<!--滑块验证码-->

<script src="https://www.jq22.com/jquery/bootstrap-4.2.1.js"></script>
<script src="js/longbow.slidercaptcha.js"></script>
<!--滑块验证码-->
<script>
    $('#captcha').sliderCaptcha({
        repeatIcon: 'fa fa-redo',
        setSrc: function() {
            return 'images/Pic' + Math.round(Math.random() * 4) + '.jpg';
        },
        onSuccess: function() {
            $("#user-register-but").css("display","");
        }
    });
</script>

<!--底部服务-->
<div class="ft-service">
    <div class="w1200">
        <div class="sv-con-l2 f-l">
            <dl>
                <dt><a href="#">新手上路</a></dt>
                <dd>
                    <a href="#">购物流程</a>
                    <a href="#">在线支付</a>
                </dd>
            </dl>
            <dl>
                <dt><a href="#">配送方式</a></dt>
                <dd>
                    <a href="#">货到付款区域</a>
                    <a href="#">配送费标准</a>
                </dd>
            </dl>
            <dl>
                <dt><a href="#">购物指南</a></dt>
                <dd>
                    <a href="#">常见问题</a>
                    <a href="#">订购流程</a>
                </dd>
            </dl>
            <dl>
                <dt><a href="#">售后服务</a></dt>
                <dd>
                    <a href="#">售后服务保障</a>
                    <a href="#">退款说明</a>
                    <a href="#">新手选购商品总则</a>
                </dd>
            </dl>
            <dl>
                <dt><a href="#">关于我们</a></dt>
                <dd>
                    <a href="#">投诉与建议</a>
                </dd>
            </dl>
            <div style="clear:both;"></div>
        </div>
        <div class="sv-con-r2 f-r">
            <p class="sv-r-tle">187-8660-5539</p>
            <p>周一至周五9:00-17:30</p>
            <p>（仅收市话费）</p>
            <a href="#" class="zxkf">24小时在线客服</a>
        </div>
        <div style="clear:both;"></div>
    </div>
</div>

<!--底部 版权-->
<div class="footer w1200">
    <p>
        <a href="#">关于我们</a><span>|</span>
        <a href="#">友情链接</a><span>|</span>
        <a href="#">宅客微购社区</a><span>|</span>
        <a href="#">诚征英才</a><span>|</span>
        <a href="#">商家登录</a><span>|</span>
        <a href="#">供应商登录</a><span>|</span>
        <a href="#">热门搜索</a><span>|</span>
        <a href="#">宅客微购新品</a><span>|</span>
        <a href="#">开放平台</a>
    </p>
    <p>
        沪ICP备13044278号<span>|</span>合字B1.B2-20130004<span>|</span>营业执照<span>|</span>互联网药品信息服务资格证<span>|</span>互联网药品交易服务资格证
    </p>
</div>

</body>
</html>